<template>
	<view class="ag_container">
		<view class="agree_jn">
		<p class="per_title"><i class="iconfont">&#xe679;</i>{{text}}</p>
		<uni-forms ref="valiForm" :modelValue="deptForm" :rules="rules" class="personal_form" labelWidth="140rpx">
			<uni-forms-item name="mobile" label="上级部门">
				<uni-easyinput v-model="deptForm.parentName" type="text" :disabled="true" />
			</uni-forms-item>
			<uni-forms-item  name="deptName" label="部门名称" required>
			    <uni-easyinput v-model="deptForm.deptName" type="text" placeholder="请输入部门名称" />
			</uni-forms-item>
			<uni-forms-item name="部门主管" label="部门主管">
				<uni-easyinput v-model="selectStaffTag" type="text" placeholder="请选择部门主管" suffixIcon="forward" @iconClick="iconClick('bottom')"/>
			</uni-forms-item>
			</uni-forms>
			
			<view style="margin:0 30rpx;font-size: 24rpx;color: #666666;">
				<i class="iconfont" style="font-size:24rpx;margin:0 4rpx 6rpx;">&#xe70f;</i>操作提示：
				<p style="text-indent: 2em;">公司下最多只支持添加5级，部门名称不可与其他部门重复</p>
			</view>
		</view>
		<view class="footer-btn">
			<button @click="cancel" size="mini" class="cancel_btn">取 消</button>
			<button @click="confirmForm" size="mini" class="confirm_btn">确 定</button>
		</view>
	</view>
	</view>
</template>

<script>
	import {listCompanyRole} from "@/api/ec/console/org/companyRole";
	import {addDept, delDept, treeselect, updateDept} from "@/api/ec/console/org/dept";
	import {addStaff, delStaff, getStaff, listStaffPager, updateStaff, updateStaffStatus} from "@/api/ec/console/org/staff";
	export default {
		data() {
			return {
				text:'部门添加',
				selectStaffTag:'',
				deptForm: {
					parentName:'',
				},
				rules: {
					deptName: {rules:[{
						required: true,
						errorMessage: "请输入部门名称",
						trigger: "blur"
					},
					 ]},
				},
			};
		},
		onLoad(option) {
			this.getTreeselect()
			if(option.form){
				this.text = '部门修改'
				this.deptForm = JSON.parse(option.form)
			}
			uni.$on('selectStaff',(data) => {
				this.selectStaffTag = data.selectStaff.name + "（" +  data.selectStaff.mobile + "）"
				this.deptForm.leaderId = data.selectStaff.id;
			})	
		},
		methods: {
			/** 获取部门 */
			getTreeselect(){
				treeselect().then((response) => {
				this.deptForm.parentName = response.data[0].label
				this.deptForm.level = response.data[0].level + 1
				this.deptForm.parentId = response.data[0].id		
            })
			},
			/** 快捷选择部门主管 */
			iconClick(){
				uni.navigateTo({
					url:'../selectStaffTag'
				})
			},
			/** 表单提交 */
			confirmForm(){
				this.$refs.valiForm.validate().then((res) => {
					if (this.deptForm.id != null) {
					    // 修改
					    this.submitEditDeptForm();
					  } else {
					    // 新增
					    this.submitAddDeptForm();
					  }             
				})
			},
			    /** 添加部门 */
			    submitAddDeptForm() {
			      addDept(this.deptForm).then(() => {
			        this.$modal.msgSuccess("新增成功");
					setTimeout(()=>{
						this.cancel()
					},300)
			      })
			    },
			    /** 修改部门 */
			    submitEditDeptForm() {
			      updateDept(this.deptForm).then(() => {
			        this.$modal.msgSuccess("修改成功");
					setTimeout(()=>{
						this.cancel()
					},300)
			      })
			    },
			/** 取消新增 */
			cancel(){
				uni.navigateBack(1)
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color;
	}
	::v-deep .check{border:4rpx solid $uni-color-primary;border-top: 0;border-left: 0;}
	::v-deep .selected-item-active{border-bottom:4rpx solid $uni-color-primary;}
	::v-deep .uni-forms-item__label{padding: 0;}
	.footer-btn{
			 margin-top: 260rpx;
			 display: flex;
			 justify-content: space-around;
			 .confirm_btn{
				 margin-left: 20rpx;
				 width: 40%;
				 background-color: $uni-color-primary;
				 color: #fff;
				 height: 70rpx;
				 line-height: 70rpx;
			 }
	}
	.per_title {
		font-size: 30rpx;
		color: #666666;
		border-bottom: 1rpx solid #d3d3d3;
		padding-bottom: 16rpx;

		.iconfont {
			padding-right: 6rpx;
		}
	}
	.cancel_btn{
		background-color: #fff;
		color: $uni-color-primary;
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border: 1rpx solid $uni-color-primary;
	}

	.personal_form {
		margin-top: 40rpx;
		padding: 0 30rpx;
	}

	.ag_container {
		position: relative;
	}

	.agree_jn {
		padding:30rpx 20rpx 0 20rpx;
	}
</style>
